<template>
  <div class="business-view">
    <div class="page-header">
      <h1>公海池</h1>
    </div>

    <!-- 搜索条件区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>商机ID：</label>
          <input type="text" placeholder="请输入商机ID" v-model="searchParams.businessId">
        </div>
        <div class="search-item">
          <label>客户姓名：</label>
          <input type="text" placeholder="请输入客户姓名" v-model="searchParams.name">
        </div>
        <div class="search-item">
          <label>手机号：</label>
          <input type="text" placeholder="请输入手机号" v-model="searchParams.phone">
        </div>
        <div class="search-item">
          <label>意向学科：</label>
          <select v-model="searchParams.subject">
            <option value="">请选择</option>
            <option :value="1">AI智能应用开发(Java)</option>
            <option :value="2">AI大模型开发(Python)</option>
            <option :value="3">AI鸿蒙开发</option>
            <option :value="4">AI大数据</option>
            <option :value="5">AI嵌入式</option>
            <option :value="6">AI测试</option>
            <option :value="7">AI运维</option>
          </select>
        </div>
      </div>
      
      <div class="search-buttons">
        <button class="search-btn" @click="handleSearch">搜索</button>
        <button class="reset-btn" @click="handleReset">重置</button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table 
        :data="poolData" 
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="id" label="商机ID" width="100" />
        <el-table-column prop="name" label="客户姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column prop="subject" label="意向学科" width="180">
          <template #default="scope">
            {{ getSubjectName(scope.row.subject) }}
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="渠道来源" width="150">
          <template #default="scope">
            {{ getChannelName(scope.row.channel) }}
          </template>
        </el-table-column>
        <el-table-column prop="degree" label="学历" width="100">
          <template #default="scope">
            {{ getDegreeName(scope.row.degree) }}
          </template>
        </el-table-column>
        <el-table-column prop="jobStatus" label="在职状态" width="120">
          <template #default="scope">
            {{ getJobStatusName(scope.row.jobStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDateTime(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button 
              size="small" 
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情模态框 -->
    <el-dialog
      v-model="dialogVisible"
      title="商机详情"
      width="60%"
      :close-on-click-modal="false"
    >
      <div v-if="currentBusiness" class="detail-info">
        <div class="detail-item">
          <span class="label">商机ID：</span>
          <span class="value">{{ currentBusiness.id }}</span>
        </div>
        <div class="detail-item">
          <span class="label">客户姓名：</span>
          <span class="value">{{ currentBusiness.name }}</span>
        </div>
        <div class="detail-item">
          <span class="label">手机号：</span>
          <span class="value">{{ currentBusiness.phone }}</span>
        </div>
        <div class="detail-item">
          <span class="label">性别：</span>
          <span class="value">{{ currentBusiness.gender === 1 ? '男' : '女' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">年龄：</span>
          <span class="value">{{ currentBusiness.age }}</span>
        </div>
        <div class="detail-item">
          <span class="label">微信号：</span>
          <span class="value">{{ currentBusiness.wechat || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">QQ号：</span>
          <span class="value">{{ currentBusiness.qq || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">意向学科：</span>
          <span class="value">{{ getSubjectName(currentBusiness.subject) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">渠道来源：</span>
          <span class="value">{{ getChannelName(currentBusiness.channel) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">学历：</span>
          <span class="value">{{ getDegreeName(currentBusiness.degree) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">在职状态：</span>
          <span class="value">{{ getJobStatusName(currentBusiness.jobStatus) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">备注：</span>
          <span class="value">{{ currentBusiness.remark || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ formatDateTime(currentBusiness.createTime) }}</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useBusinessStore } from '@/stores/business'
import { getBusinessById } from '@/api/business'

// 业务逻辑
const businessStore = useBusinessStore()

// 响应式数据
const searchParams = ref({
  businessId: '',
  name: '',
  phone: '',
  subject: ''
})

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = computed(() => businessStore.pagination.total)
const loading = computed(() => businessStore.loading)
const poolData = computed(() => businessStore.poolList)

// 模态框相关
const dialogVisible = ref(false)
const currentBusiness = ref(null)

// 初始化加载数据
onMounted(() => {
  loadPoolData()
})

// 加载公海池数据
const loadPoolData = async () => {
  try {
    await businessStore.setPagination(currentPage.value, pageSize.value)
    await businessStore.fetchPoolList(searchParams.value)
  } catch (error) {
    ElMessage.error('加载公海池数据失败')
  }
}

// 搜索方法
const handleSearch = () => {
  currentPage.value = 1
  loadPoolData()
}

// 重置方法
const handleReset = () => {
  searchParams.value = {
    businessId: '',
    name: '',
    phone: '',
    subject: ''
  }
  currentPage.value = 1
  loadPoolData()
}

// 分页处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  loadPoolData()
}

const handleCurrentChange = (newCurrent) => {
  currentPage.value = newCurrent
  loadPoolData()
}

// 查看详情
const handleView = async (item) => {
  try {
    const response = await getBusinessById(item.id)
    if (response.code === 1) {
      currentBusiness.value = response.data
      dialogVisible.value = true
    }
  } catch (error) {
    ElMessage.error('获取商机详情失败')
  }
}



// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 获取学科名称
const getSubjectName = (subjectId) => {
  const subjectMap = {
    1: 'AI智能应用开发(Java)',
    2: 'AI大模型开发(Python)',
    3: 'AI鸿蒙开发',
    4: 'AI大数据',
    5: 'AI嵌入式',
    6: 'AI测试',
    7: 'AI运维'
  }
  return subjectMap[subjectId] || '未知'
}

// 获取渠道名称
const getChannelName = (channelId) => {
  const channelMap = {
    1: '线上活动',
    2: '线下活动',
    3: '搜索引擎',
    4: '社交媒体',
    5: '推荐介绍'
  }
  return channelMap[channelId] || '未知'
}

// 获取学历名称
const getDegreeName = (degreeId) => {
  const degreeMap = {
    1: '专科',
    2: '本科',
    3: '硕士',
    4: '博士'
  }
  return degreeMap[degreeId] || '未知'
}

// 获取在职状态名称
const getJobStatusName = (jobStatusId) => {
  const jobStatusMap = {
    0: '待业',
    1: '在职',
    2: '应届'
  }
  return jobStatusMap[jobStatusId] || '未知'
}
</script>

<style scoped>
.business-view {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.search-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
}

.search-item input,
.search-item select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 200px;
}

.search-buttons {
  display: flex;
  gap: 10px;
}

.search-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-btn:hover {
  background-color: #40a9ff;
}

.reset-btn {
  background-color: white;
  color: #666;
  border: 1px solid #ddd;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.reset-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.table-section {
  margin-bottom: 20px;
  overflow-x: auto;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}

/* 详情模态框样式 */
.detail-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.detail-item .label {
  font-weight: bold;
  color: #333;
  min-width: 100px;
  margin-right: 10px;
}

.detail-item .value {
  color: #666;
  word-break: break-all;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .search-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .search-item {
    width: 100%;
  }
  
  .search-item input,
  .search-item select {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .pagination-section {
    justify-content: center;
  }
  
  .detail-info {
    grid-template-columns: 1fr;
  }
}
</style>